<!DOCTYPE HTML>

<html ng-app lang="en">

{{>/head}}

<div class="container" >
		<!-- ========================================================================================================= row 1 (title) -->
		<div class="row">
            <center><h1 class="logoBigText"><span class="vcu">new</span>Assignment</h1></center>
        </div>
        <!-- ========================================================================================================= row 1 (title) -->

		<!-- ========================================================================================================= row 2 (Register Assignment Form ) -->
		<div class="row">

			<div class="col-md-3"></div>

			<form ng-controller="assignmentController" name="NewAssignmentForm" class="col-md-6" novalidate>

                <!-- ========================================================================================================= AssignmentId Input -->
                <p class="motto">ID of New Assignment:</p>
                <div class="form-group">
                    <input type="text" placeholder="Assignment ID" name="AssignmentId" ng-model="assignment.assignmentId" class="form-control" required>
                </div>
                <!-- ========================================================================================================= /AssignmentId Input-->

                <!-- ========================================================================================================= AssignmentName Input-->
                <p class="motto">Name of New Assignment:</p>
                <div class="form-group">
                    <input type="text" placeholder="Assignment Name" name="AssignmentName" ng-model="assignment.assignmentName" class="form-control" required>
                </div>
                <!-- ========================================================================================================= /AssignmentName Input-->

                <!-- ========================================================================================================= PlatformDropdown-->
                <div class="form-group">
                    <p class="motto">Platform:</p>
                    <select class="empty btn btn-mini form-control" ng-model="assignment.platformId"required name="PlatformDropdown">
                     <option value="" selected disabled>Select Platform</option>
                        {{#platforms}}
                        <option value="{{platformId}}">{{platformName}}</option>
                        {{/platforms}}
                    </select>
                </div>
                <!-- ========================================================================================================= /PlatformDropdown-->

                <!-- ========================================================================================================= Description Input-->
                <div class="form-group">
                    <p class="motto">Assignment Description:</p>
                    <textarea class="form-control" type="text" name="Description" placeholder="Assignment Description" ng-model="assignment.description" rows="5" ></textarea>
                </div>
                <!-- ========================================================================================================= /Description Input-->

                <!-- ========================================================================================================= SubmissionPoints Input-->
                <p class="motto">Submission Points:</p>
                <div class="form-group">
                    <input type="text" placeholder="Submission Points" name="SubmissionPoints" ng-model="assignment.submissionPoints" class="form-control" required>
                </div>
                <!-- ========================================================================================================= /SubmissionPoints Input-->

                <!-- ========================================================================================================= ReviewPoints Input-->
                <p class="motto">Review Points:</p>
                <div class="form-group">
                    <input type="text" placeholder="Review Points" name="ReviewPoints" ng-model="assignment.reviewPoints" class="form-control" required>
                </div>
                <!-- ========================================================================================================= /ReviewPoints Input-->

                <!-- ========================================================================================================= ValidationBlock -->
                <div class="alert alert-warning"
                        class="help-block"
                        ng-show="NewAssignmentForm.$invalid" name="ValidationBlock">

                    <li ng-show="NewAssignmentForm.AssignmentId.$error.required">Please enter a ID for the new Assignment.</li>
                    <li ng-show="NewAssignmentForm.AssignmentName.$error.required">Please enter a name for the new Assignment.</li>
                    <li ng-show="NewAssignmentForm.PlatformDropdown.$error.required">Please select a Platform.</li>
                </div>
                <!-- ========================================================================================================= /ValidationBlock -->

                <!-- ========================================================================================================= AdminPanel -->
                <div class="alert alert-warning">
                    {{=[[ ]]=}}

                         <p>Admin Panel:</p>
                         <pre>{{assignment | json}}</pre>


                     [[={{ }}=]]
                 </div>
                <!-- ========================================================================================================= /AdminPanel -->

                <!-- ========================================================================================================= Reset and Submit Buttons -->
                <center>
                    <button ng-click="reset()" type="reset" class="btn btn-primary">Reset</button>
                    <button
                        ng-click="update(assignment)"
                        type="submit"
                        ng-disabled="NewAssignmentForm.$invalid "
                        class="btn btn-success" >Submit New Assignment
                    </button>
                </center>
                <!-- ========================================================================================================= /Reset and Submit Buttons -->

			</form><!-- /newAssignmentForm-->

			<div class="col-md-3"></div>

		</div><!--/row-->
        <!-- ========================================================================================================= /row 2 (Register Assignment Form ) -->
	</div> <!--/container-->



{{>/foot}}

    <!-- Move to script.js when ready, keep in mustache during testing -->
	<script type="text/javascript">

	function assignmentController($scope, $http) {
		$scope.master= {};
		$scope.assignment= {};
		$scope.output= {};
		$scope.submitURL="/registerassignment";
		$scope.update = function(assignment) {
			$scope.master= angular.copy(assignment);
			$http.post($scope.submitURL, $scope.assignment).success(function(data){
				$scope.master={};
				window.location.href=window.location.href;
				});
		}
		$scope.reset = function() {
			$scope.user = angular.copy($scope.master);
			$scope.form.$setPristine();
		};
	}</script>

</html>